<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 轮播图部分 -->
    <div class="relative w-full h-[500px]">
      <swiper :modules="swiperModules" :pagination="{ clickable: true }" :autoplay="{ delay: 3000 }" class="h-full">
        <swiper-slide v-for="(pic, index) in scenicSpot.picList" :key="index">
          <div class="w-full h-full">
            <img :src="SERVER_ADDR + '/scenicSpot/pic/' + pic.url" class="w-full h-full object-cover" alt="景点图片" />
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <!-- 景点基本信息 -->
    <div class="max-w-7xl mx-auto px-6 py-8">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <div class="flex justify-between items-start">
          <div>
            <h1 class="text-3xl font-bold mb-4">{{ scenicSpot.name }}</h1>
            <div class="flex items-center gap-4 mb-3">
              <el-rate v-model="rating" disabled show-score text-color="#ff9900" />
            </div>
            <div class="flex items-center gap-2 text-gray-600 mb-2">
              <el-icon><Location /></el-icon>
              <span>{{ `${scenicSpot.addr.province}-${scenicSpot.addr.city}-${scenicSpot.addr.street}-${scenicSpot.addr.address}` }}</span>
            </div>
            <div class="flex items-center gap-2 text-gray-600 mb-2">
              <el-icon><Guide /></el-icon>
              <span>{{scenicSpot.description}}</span>
            </div>
            <div class="flex items-center gap-2 text-gray-600">
              <el-icon><Clock /></el-icon>
              <span>开放时间{{scenicSpot.openTime}}</span>
            </div>
          </div>
          <div class="flex gap-4">
            <button class="!rounded-button flex items-center gap-2 px-4 py-2 border border-gray-300">
              <el-icon><Star /></el-icon>
              <span>收藏</span>
            </button>
            <button class="!rounded-button flex items-center gap-2 px-4 py-2 border border-gray-300">
              <el-icon><Share /></el-icon>
              <span>分享</span>
            </button>
          </div>
        </div>

        <!-- 特色标签 -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <h2 class="text-lg font-medium mb-4">特色标签</h2>
          <div class="flex flex-wrap gap-2">
          <span
              v-for="(tag, index) in scenicSpot.tags"
              :key="index"
              class="px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm !rounded-button whitespace-nowrap"
          >
            {{ tag }}
          </span>
          </div>
        </div>

        <!-- 适合人群 -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <h2 class="text-lg font-medium mb-4">适合人群</h2>
          <div class="flex flex-wrap gap-2">
          <span
              v-for="(crowd, index) in scenicSpot.suitableFor"
              :key="index"
              class="px-4 py-2 bg-green-50 text-green-600 rounded-full text-sm !rounded-button whitespace-nowrap"
          >
            {{ crowd }}
          </span>
          </div>
        </div>
        <!-- 门票信息 -->
        <div class="mt-6 bg-orange-50 p-4 rounded-lg">
          <h3 class="text-xl font-semibold mb-3">门票信息</h3>
          <div class="grid grid-cols-3 gap-4">
            <div class="bg-white p-4 rounded-lg">
              <div class="text-orange-500 text-xl font-bold">¥{{Number( scenicSpot.ticketPrice ).toFixed(2)}}</div>
              <div class="text-gray-600">成人票</div>
            </div>
            <div class="bg-white p-4 rounded-lg">
              <div class="text-orange-500 text-xl font-bold">¥{{Number(scenicSpot.ticketPrice*0.8).toFixed(2)}}</div>
              <div class="text-gray-600">学生票</div>
            </div>
            <div class="bg-white p-4 rounded-lg">
              <div class="text-orange-500 text-xl font-bold">¥ {{Number(scenicSpot.ticketPrice*0.5).toFixed(2)}}</div>
              <div class="text-gray-600">儿童票</div>
            </div>
          </div>
        </div>
        <!-- 联系方式 -->
        <div class="mt-6 bg-white  p-4 rounded-lg">
          <h2 class="text-lg font-medium mb-3">联系方式</h2>
          <div class="space-y-4">
            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer">
              <el-icon class="text-gray-600 text-xl">
                <Phone />
              </el-icon>
              <div>
                <div class="text-gray-600">景区电话</div>
                <div class="text-lg font-medium">{{ scenicSpot.contactTel }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 详细介绍 -->
      <div class="mt-8 bg-white rounded-lg shadow-lg p-6">
        <el-tabs>
          <el-tab-pane label="景点介绍">
            <div class="space-y-4" v-html="scenicSpot.detail"/>
          </el-tab-pane>
          <el-tab-pane label="交通指南">
            <div class="space-y-4" v-html="scenicSpot.route"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-up p-4">
      <div class="max-w-7xl mx-auto flex justify-between items-center">
        <div class="flex items-center gap-4">
          <button class="!rounded-button px-4 py-2 border border-blue-500 text-blue-500">
            <el-icon class="mr-1"><ChatLineRound /></el-icon>
            在线咨询
          </button>
        </div>
        <button
            class="!rounded-button px-8 py-2 bg-orange-500 text-white hover:bg-orange-600"
            @click="toTicket"
        >
          立即预订
        </button>
      </div>
    </div>
  </div>
</template>

<script  setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay } from 'swiper/modules';
import {Location, Clock, Star, Share, ChatLineRound, Guide, Phone} from '@element-plus/icons-vue';
import 'swiper/swiper-bundle.css';
import {useRoute, useRouter} from "vue-router";
import {useTokenStore} from "@/stores/tokenStore.js";
import scenicSpotApi from "@/api/scenicSpotApi"
import collectApi from "@/api/collectApi.js";

const router = useRouter();
const route  = useRoute();
const tokenStore = useTokenStore();
//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
const swiperModules = [Pagination, Autoplay];
const rating = ref(4.8);
//商品收藏状态
const collectInfo = ref(null);
// 定义景点
const scenicSpot = ref({
  id: null,
  name: null,
  description: null,
  addr: {
    province: null,
    city: null,
    district: null,
    street: null,
    address: null,
    postCode: null,
  },
  ticketPrice: null,
  openTime: null,
  recommendDuration: null,
  suitableFor: null,
  isRecommended: null,
  tags: null,
  status: null,
  picList: [],
  detail: null,
  route: null,
  categoryId: null,
  contactTel: null,
});

const selectById = ()=>{
  let id = route.query.id;
  console.log(id)
  scenicSpotApi.selectById(id)
      .then(resp => {
        scenicSpot.value = resp.data
        scenicSpot.value.tags = scenicSpot.value.tags.split(",");
        scenicSpot.value.suitableFor = scenicSpot.value.suitableFor.split(",");
        //判断用户有没有登录
        if (tokenStore.tokenStr != null){
          //获取当前商品的收藏状态
          getCollectInfo();
        }
      })
}
//判断是否收藏
const getCollectInfo = () => {
  collectApi.selectCollect(scenicSpot.value.id)
      .then(resp => {
        collectInfo.value = resp.data;
      })
}
// 跳转到预购界面
const toTicket = () => {
  router.push({
    path: '/user/ticket',
    query: {
      id: scenicSpot.value.id,
    }
  })
}
selectById();
</script>

<style scoped>
.shadow-up {
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
}
</style>

